<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height:200px;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			
			window.onload=function(){
				var oBox=document.getElementById('box');
				var oBox1=document.getElementById('box1');
				var zindex=0;
				drag(oBox);
				drag(oBox1);
				
				
				
				function drag(obj){//拖拽
					var shortx=0;
					var shorty=0;
					obj.onmousedown=function(ev){
						obj.style.zIndex=++zindex;
						var ev=ev||window.event;
						shortx=ev.clientX-obj.offsetLeft;
						shorty=ev.clientY-obj.offsetTop;
						document.onmousemove=function(ev){
							var ev=ev||window.event;
							obj.style.left=ev.clientX-shortx+'px';
							obj.style.top=ev.clientY-shorty+'px';
							
							hit(oBox,oBox1);
						}
						document.onmouseup=function(){
							document.onmousemove=null;
							document.onmouseup=null;
						}
						return false;
					}
				}
				
				function hit(obj1,obj2){
					if(!(obj1.offsetLeft+obj1.offsetWidth<obj2.offsetLeft || obj1.offsetLeft>obj2.offsetLeft+obj2.offsetWidth || obj1.offsetTop+obj1.offsetHeight<obj2.offsetTop || obj1.offsetTop>obj2.offsetTop+obj2.offsetHeight)){
						obj2.style.background='green';
					}else{
						obj2.style.background='red';
					}
				}
				
				
			}
		</script>
	</head>
	<body>
		<div id="box" style="background: blue;"></div>
		<div id="box1" style="background: red; left: 300px;"></div>
	</body>
</html>
